<template>
	<view style="height: 50px;">
		<view :style="headerTopStyle" :class="props.fixed?'header':''" class="cu-bar search bg-white padding-tb-sm">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="inputValue" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" :placeholder="props.placeholder" confirm-type="search" />
			</view>
			<view class="action"><button @click="handleClickItem" class="cu-btn bg-green shadow-blur round">搜索</button></view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useSettingStore } from '@/stores/index';
const setting = useSettingStore();
const emit = defineEmits(['action']);
const inputValue = ref('');
const props = defineProps({
	placeholder: {
		type: String,
		default: '提示'
	},
	icon: {
		type: String,
		default: 'cuIcon-loading2'
	},
	value: {
		type: String,
		default: 0
	},
	fixed: {
		type: Boolean,
		default: false
	}
});
watch(
	() => props.value,
	(newValue, oldValue) => {
		inputValue.value = newValue;
	}
);
const headerTopStyle = computed(() => {
	var height = setting.CustomBar;
	if (props.fixed) {
		return `position: fixed;top: ${height}px;z-index: 1000;left: 0;right: 0;`;
	}else {
		return ''
	}
});
const InputBottom = ref(0);
const handleClickItem = (e: any) => {
	emit('action', inputValue.value);
};
const InputFocus = (e: any) => {
	InputBottom.value = e.detail.height;
};
const InputBlur = (e: any) => {
	InputBottom.value = 0;
};
</script>

<style scoped>
.cu-bar {
	min-height: 30px;
}
</style>
